<template>
  <div class="day-card">
    <head-top goBack="true" head-title="打卡统计"></head-top>
    <div class="card-num" v-show="dayDaka.first_time">
      <span>共打卡{{dayDaka.number}}次</span>
      <span>{{dayDaka.first_time*1000 | dateFmt('YYYY-MM-DD')}}</span>
    </div>
    <div class="no-card" v-show="dayDaka.message">
      <p>{{dayDaka.message}}</p>
    </div>
    <day-count :dayDaka="dayDaka"></day-count>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
import dayCount from '../common/dayCount.vue'
import {getDayData} from '../../api/jianli.js'
export default {
  name: 'DayCardDetail',
  data() {
    return {
      dayDaka: {}
    }
  },
  components: {
    headTop,
    dayCount
  },
  created() {
    this._getDayData()
  },
  methods: {
    _getDayData() {
      if (this.$route.params.id != 'undefined') {
        getDayData(this.$route.params.id).then(res => {
          this.dayDaka = res.data
        })
      } else {
        this.dayDaka.message = '无打卡记录'
      }
    }
  }
}
</script>

<style lang="scss">
  .day-card {
    padding-top: 40px;
    background-color: #fff;
    .card-num {
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      display: flex;
      background-color: #f2f2f2;
      span{
        flex: 1;
        &:last-child {
          text-align: right;
        }
      }
    }
    .no-card{
      padding-left: 10px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
      }
  }
</style>
